import React, { Fragment, useState } from 'react';
import { Listbox, Transition } from '@headlessui/react';
import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/solid';

interface BranchSelectorProps {
  branches: string[];
  currentBranch: string;
  onBranchChange: (branch: string) => void;
}

const BranchSelector: React.FC<BranchSelectorProps> = ({ 
  branches, 
  currentBranch, 
  onBranchChange 
}) => {
  const [isOpen, setIsOpen] = useState(false);

  if (!branches || branches.length === 0) {
    return (
      <div className="relative inline-block text-left">
        <button
          type="button"
          className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700"
          disabled
        >
          加载分支中...
        </button>
      </div>
    );
  }

  return (
    <Listbox value={currentBranch} onChange={onBranchChange}>
      {({ open }) => (
        <div className="relative mt-1">
          <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700 cursor-default focus:outline-none focus:ring-1 focus:ring-green-500 focus:border-green-500 sm:text-sm">
            <span className="block truncate text-gray-700 dark:text-gray-300">
              {currentBranch || '选择分支'}
            </span>
            <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
              <ChevronDownIcon
                className="h-5 w-5 text-gray-400"
                aria-hidden="true"
              />
            </span>
          </Listbox.Button>

          <Transition
            show={open}
            as={Fragment}
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Listbox.Options className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
              {branches.map((branch) => (
                <Listbox.Option
                  key={branch}
                  className={({ active }) =>
                    `${active ? 'text-white bg-green-600 dark:bg-green-700' : 'text-gray-900 dark:text-gray-300'}
                    cursor-default select-none relative py-2 pl-10 pr-4`
                  }
                  value={branch}
                >
                  {({ selected, active }) => (
                    <>
                      <span
                        className={`${selected ? 'font-medium' : 'font-normal'} block truncate`}
                      >
                        {branch}
                      </span>
                      {selected ? (
                        <span
                          className={`${active ? 'text-white' : 'text-green-600 dark:text-green-400'}
                          absolute inset-y-0 left-0 flex items-center pl-3`}
                        >
                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
                        </span>
                      ) : null}
                    </>
                  )}
                </Listbox.Option>
              ))}
            </Listbox.Options>
          </Transition>
        </div>
      )}
    </Listbox>
  );
};

export default BranchSelector;